<!DOCTYPE html>
<html>
	<!--
    	矿池
    -->

	<head>
		<meta charset="utf-8">
		<title>AIC</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link type="text/css" rel="stylesheet" href="../css/common.css">

		<style>
			[v-cloak] {
				display: none;
			}
			
			html,body{
				height: 100%;
			}
			
			.switch {
				width: 80%;
				height: 50px;
				margin: auto;
			}
			
			.switch a {
				font-size: 14px;
				height: 30px;
				line-height: 30px;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.main {
				padding-top: 0px;
			}
			
			.mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 15px;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.kj-item {
				width: 100%;
				border-top: 1px solid #DADAD8;
				border-bottom: 1px solid #DADAD8;
				margin-top: 0px;
				clear: both;
				position: relative;
				overflow: hidden;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				padding: 5px 0px;
				-webkit-touch-callout: none;
			}
			
			.toSell {
				position: absolute;
				right: 10px;
				top: 20px;
				color: #fff;
				background: #FF6600;
				border-radius: 20px;
				width: 80px;
				text-align: center;
				height: 30px;
				line-height: 30px;
			}
			
			.bg-img {
				background-image: url(../images/mainBg.jpg);
			}
			
			.mui-icon {
				vertical-align: middle;
				font-size: 14px;
				color: #FF6600;
				padding-bottom: 4px;
			}
			
			.mui-scroll-wrapper {
				top: 270px;
			}
			
			.mui-action-back,
			.mui-action-back:hover {
				left: 5px;
				top: 5px;
				font-size: 24px;
				color: #ffffff;
				z-index: 9;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div class="mui-content bg-img" id="aicVue" v-cloak>
			<header class="kuang-chi">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<div class="title">矿池</div>
				<div class="myData">
					<div class="container">
						<span>个人算力<strong>{{suanli}}</strong></span>
						<span>个人产量<strong>{{total}}</strong></span>
					</div>
				</div>
				<div class="bg"><img src="../images/kcBg.jpg" width="100%" height="100%" /></div>
			</header>
			<!-- 状态切换按钮 -->
			<div class="h20clear"></div>
			<div class="switch">
				<a class="ac" id="working" onclick="workingClik();">进行中</a>
				<a id="stop" onclick="stopClik();">已停止</a>
			</div>

			<div id="refreshContainer" class="mui-scroll-wrapper bg-img">
				<div class="mui-scroll">
					<ul id="machines" class="mui-table-view bg-img" style="margin-top: 0px;">
						<li class="mui-table-view-cell" v-for="item in machines" style="margin-bottom: 0px;padding-top: 0px;" @tap="open_result(item)">
							<div class="kj-item">
								<img :src="item.machineImg" alt="矿机"/>
								<span>
								编号:&nbsp; {{item.machineNo}}<br/> 
							        待领取:&nbsp; <s><strong>{{item.preProfit}} AIC</strong>
							        <i class="mui-icon mui-icon-star" v-if="item.preProfit>0"></i></s>
							   <br/>
							        剩余天数:&nbsp; <s>{{item.totalDays - item.runningDays}}</s>天
							    </span>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
		<script language="javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script language="javascript">
			mui.init({
				pullRefresh: {
					container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					up: {
						height: 50, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						callback: loadMoreMachines //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			});

			var clickTap = "1"; //1为进行中的矿机，0为停止矿机
			var page = 1;
			var totalPage = 1; //总页码
			var cuPage = 1; //当前页码
			//点击进行中按钮
			function workingClik() {
				$("#working").addClass("ac");
				$("#stop").removeClass("ac");
				clickTap = "1";
				page = 1;
				refreshMachines();
			}

			//点击停止中按钮
			function stopClik() {
				$("#stop").addClass("ac");
				$("#working").removeClass("ac");
				clickTap = "0";
				page = 1;
				refreshMachines();
			}

			var vm = new Vue({
				el: '#aicVue',
				data: {
					suanli: "",
					total: "",
					machines: []
				},
				mounted: function() {
					mui.plusReady(function() {
						swipeBack();
						MyKjs();
					});
				},
				methods: {
					open_result: function(item) {
						mui.openWindow({
							id: 'mykuangji-detail',
							url: '../kuangji/mykuangji-detail.html',
							extras: {
								item: item
							}
						});
					},
					setGetProfit: function(id) {
						mui.each(vm.machines, function(index, item) {
							if(item.id == id) {
								item.sumProfit = vm.totalSum(item.sumProfit, item.preProfit);
								item.preProfit = 0;
								return false;
							}
						});
					},
					totalSum: function(arg1, arg2) {
						var r1, r2, m;
						try {
							r1 = arg1.toString().split(".")[1].length;
						} catch(e) {
							r1 = 0;
						}
						try {
							r2 = arg2.toString().split(".")[1].length;
						} catch(e) {
							r2 = 0;
						}
						m = Math.pow(10, Math.max(r1, r2));
						return Number(((arg1 * m + arg2 * m) / m).toFixed(Math.max(r1, r2)));
					}
				}
			});

			///我的矿机,第一次调用
			function MyKjs() {
				mui.postParam(MyMachine, "", function(result) {
					mConsole.log("我的矿机：" + JSON.stringify(result));
					if(result.code == 0) {
						vm.suanli = result.totalHashSecond;
						vm.total = result.totalPerDayProfit;

						vm.machines.splice(0, vm.machines.length);
						vm.machines = vm.machines.concat(result.page.list);

					} else {
						mymui(result.msg);
					}
				});
			}

			//刷新时调用
			function refreshMachines() {
				mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
				var URL = "";
				if(clickTap == "1") {
					URL = RunningMachines;
				} else {
					URL = FinishMachine;
				}
				page = 1;
				var data = {
					"page": page
				}

				mui.postParam(URL, data, function(result) {
					mConsole.log("刷新矿机矿机" + clickTap + ":" + JSON.stringify(result));
					if(result.code == 0) {
						vm.machines.splice(0, vm.machines.length);
						vm.machines = vm.machines.concat(result.page.list);
						page++;

						if(result.page.currPage >= result.page.totalPage) {
							mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
						}
						mui('#refreshContainer').pullRefresh().endPullupToRefresh(result.page.currPage >= result.page.totalPage);
					} else {
						mymui(result.msg);
					}
				});
			}

			function loadMoreMachines(tap) {
				var URL = "";
				if(clickTap == "1") {
					URL = RunningMachines;
				} else {
					URL = FinishMachine;
				}

				var data = {
					"page": page
				};
				mui.postParam(URL, data, function(result) {
					mConsole.log("加载更多矿机" + clickTap + ":" + JSON.stringify(result));
					if(result.code == 0) {
						totalPage = result.page.totalPage;
						cuPage = result.page.currPage;
						if(page == 1) {
							vm.machines.splice(0, vm.machines.length);
						}
						vm.machines = vm.machines.concat(result.page.list);
						page += 1;

						if(result.page.currPage >= result.page.totalPage) {
							mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
						}
					} else {
						mymui(result.msg);
					}
					mui('#refreshContainer').pullRefresh().endPullupToRefresh(cuPage >= totalPage);
				});
			}

			window.addEventListener("setGetProfit", function(event) {
				vm.setGetProfit(event.detail.id);
			});
		</script>
	</body>

</html>